<!doctype html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">


    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
    <script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="/plugins/jqvalidate/jquery.validate.min.js"></script>
    <script src="/plugins/jqvalidate/localization/messages_zh.min.js"></script>

</head>

<body>

<div class="container-fluid">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="preAdd();">
        新增学生
    </button>



    <table class="table table-bordered" id="studentTb">


    </table>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">学生信息</h4>
            </div>
            <div class="modal-body">
                <form id="formStudent">

                    <input hidden="hidden" id="id" name="id" />
                    <div class="form-group">
                        <label for="no">学号</label>
                        <input type="text" class="form-control" id="no" name="no" placeholder="学号" required
                                minlength="8" maxlength="10">
                    </div>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                    </div>
                    <div class="form-group">
                        <label for="sex">性别</label>
                        <select class="form-control" id="sex" name="sex">
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="score">成绩</label>
                        <input type="text" class="form-control" id="score" name="score" placeholder="成绩">
                    </div>
                </form>
                <!- 表单结束>
            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-primary" onclick="saveStudent();">保存</button>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<script type="text/javascript" >

    function preAdd(){
        $('#id').val(0);
    }

    function saveStudent(){
        var data=$("#formStudent").serialize();

        var id=$('#id').val()

        if(id<1){
            $.ajax({

                url:"webapi/student/insert",
                method:"POST",

                data:data
            }).done(function (){
                loadTable();

                $('#myModal').modal('hide')
            })

        }else {
            $.ajax({

                url:"webapi/student/update",
                method:"PuT",

                data:data
            }).done(function (){
                loadTable();

                $('#myModal').modal('hide')
            })

        }
    }

    function deleteStudent(id){
        if(confirm("确认删除？")){
            $.ajax({
                url:'webapi/student/delete/'+id, // 通常我们会将id作为URL的一部分或查询参数传递
                method: "DELETE"
            }).done(function (){
                alert('学生已删除！');
                loadTable(); // 重新加载表格数据
            })
        }

    }

    function editStudent(id){

        $.ajax({

            url:'webapi/student/get/'+id
        }).done(function (rs){

            $("#id").val(rs.id);
            $("#no").val(rs.no);
            $("#name").val(rs.name);
            $("#password").val("");
            $("#sex").val(rs.sex);
            $("#score").val(rs.score);
            $('#myModal').modal('show')
        })
    }

    function loadTable(){

        $.ajax({url: 'webapi/student/list'}).done(function (rs){
            var len=rs.length;

            var html="";
            for (var i=0;i<len;i++){
                var item=rs[i];

                html+="<tr>"
                    +"<td>"+item.id+"</td>"
                    +"<td>"+item.no+"</td>"
                    +"<td>"+item.name+"</td>"
                    +"<td>"+item.sex+"</td>"
                    +"<td>"+item.score+"</td>"

                    +"<td><a href='#' onclick='editStudent("+item.id+")'>编辑</a>   <a href='#' onclick='deleteStudent("+
                    item.id+")'>删除</a> </td>"
                    +"</tr>"
            }
            $("#studentTb").html(html);
        })
    }
    $(function (){

        $("#formStudent").validate({
            submitHandler: saveStudent()
        });

        $("#studentTb").bootstrapTable({
            method: 'get', // 服务器数据的请求方式 get or post
            url:"/student/webapi/student/list", // 服务器数据的加载地址
            striped: true, //是否显示行间隔色
            cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true, //是否显示分页（*）
            sortable: false, //是否启用排序
            sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1, //初始化加载第一页，默认第一页
            pageSize: 3, //每页的记录行数（*）
            pageList: [5, 25, 50, 100], //可供选择的每页的行数（*）
            strictSearch: false,
            minimumCountColumns: 2, //最少允许的列数
            clickToSelect: true, //是否启用点击选中行
            uniqueId: "id", //每一行的唯一标识，一般为主键列
            cardView: false,
            detailView: false, //是否显示详细视图
            smartDisplay: false,
            queryParams: function(params) {
                return {
                    pageSize: params.limit,
                    pageNum: params.offset / params.limit + 1,
                };
            },
            columns: [{
                checkbox: true
            },{
                field: 'id',
                title: '学生id'
            },{
                field: 'no',
                title: '学号'
            }, {
                field: 'name',
                title: '学生姓名'
            }, {
                field: 'sex',
                title: '性别'
            }, {
                field: 'score',
                title: '成绩'
            }, {
                field: 'work',
                title: '操作',
                formatter: operateFormatter,
                events: operateEvents
            }]
        });

    });
    function operateFormatter(value, row, index) {
        return [
            '<button class="edit btn btn-sm btn-primary">编辑</button>',
            '<button class="delete btn btn-sm btn-danger">删除</button>'
        ].join(' ');
    }

    window.operateEvents = {
        'click .edit': function (e, value, row, index) {
            editStudent(row.id);
        },
        'click .delete': function (e, value, row, index) {
            if (confirm('确定要删除该学生吗？')) {
                deleteStudent(row.id);
            }
        }
    }

</script>

</body>
</html>